<template>
  <div style="text-align: left">
    <el-dialog
      title="编辑信息"
      :visible.sync="dialogFormVisible"
      @close="clear"
      @open="initData"
      width="30%"
      center>
      <el-form :model="confirmForm" :rules="rules" class="confirm-container" label-position="left"
               label-width="80px">
        <el-form-item prop="name" label="姓名">
          <el-input type="text" v-model="confirmForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-radio-group v-model="confirmForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="date" label="出生日期">
          <el-date-picker
            v-model="confirmForm.date"
            class="size-full"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="lxfs" label="手机">
          <el-input v-model.number="confirmForm.lxfs"></el-input>
        </el-form-item>
        <el-form-item prop="nj" label="年级">
          <el-select v-model="confirmForm.nj" @change="yearChange" placeholder="请选择" class="size-full" clearable>
            <el-option v-for="item in years"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="cid" label="所在学院">
          <el-select v-model="confirmForm.academy.id" @change="changeRid" placeholder="请选择所在学院" class="size-full"
                     clearable>
            <el-option v-for="item in cidOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="rid" label="所学专业">
          <el-select v-model="confirmForm.specialized.id" @click.native="changeRidList" placeholder="请选择所学专业"
                     class="size-full" clearable>
            <el-option v-for="item in ridOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="szbj" label="所在班级">
          <el-input type="text" v-model="confirmForm.szbj" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="" v-on:click="confirm">提交
        </el-button>
        <el-button @click="dialogFormVisible = false" style="">取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Student',
  props: ['initDataForm'],
  data () {
    return {
      dialogFormVisible: false,
      years: [],
      form: {
        recentYear: ''
      },
      // 默认专业列表，解决打开编辑栏没有专业显示
      ridOptions: [
        {value: 1, label: '网络工程'},
        {value: 2, label: '大数据'},
        {value: 3, label: '信息安全'},
        {value: 4, label: '地理测绘'},
        {value: 5, label: '气象'},
        {value: 6, label: '安全工程'}
      ],
      cidOptions: [
        {value: 1, label: '物联网工程学院'},
        {value: 2, label: '大气与遥感学院'}
      ],
      cidToRidOptions: [
        {
          into: [
            {value: 1, label: '网络工程'},
            {value: 2, label: '大数据'},
            {value: 3, label: '信息安全'}
          ]
        },
        {
          into: [
            {value: 4, label: '地理测绘'},
            {value: 5, label: '气象'},
            {value: 6, label: '安全工程'}
          ]
        }
      ],
      // 临时存放待编辑信息
      confirmForm: {
        id: '',
        acc: '',
        name: '',
        date: '',
        sex: '',
        academy: {
          id: '',
          name: ''
        },
        specialized: {
          id: '',
          name: ''
        },
        szbj: '',
        nj: '',
        lxfs: ''
      },
      rules: {}
    }
  },
  methods: {
    confirm () {
      let isEmpty = true
      for (let key in this.confirmForm) {
        if (this.confirmForm[key] === '') {
          if (key === 'id') {
            continue
          }
          isEmpty = false
        }
      }
      if (isEmpty) {
        this.$axios
          .post('/student/user/editInfo', {
            id: this.confirmForm.id,
            acc: this.confirmForm.acc,
            name: this.confirmForm.name,
            date: this.confirmForm.date,
            sex: this.confirmForm.sex,
            academy: this.confirmForm.academy,
            specialized: this.confirmForm.specialized,
            lxfs: this.confirmForm.lxfs,
            nj: this.confirmForm.nj,
            szbj: this.confirmForm.szbj
          }).then(resp => {
            if (resp && resp.data.code === 200) {
              alert('修改成功！')
              this.isDisabled = true
            } else {
              this.$alert(resp.data.msg, '提示', {
                confirmButtonText: '确定'
              })
            }
          }).catch(failResponse => {
          })
      } else {
        this.$alert('请填写完整信息', '提示', {
          confirmButtonText: '确定'
        })
      }
    },
    clear () {
    },
    init () {
      var myDate = new Date()
      var year = myDate.getFullYear() // 获取当前时间的年份，转化为年级2022级
      this.initSelectYear(year)
      this.form.recentYear = year
    },
    initSelectYear (year) {
      this.years = []
      for (let i = 0; i < 5; i++) {
        this.years.push({value: (year - i), label: (year - i) + '级'})
      }
    },
    yearChange (value) {
      this.form.recentYear = value
    },
    changeRid (cid) {
      // 在选项改变时清空数据
      this.confirmForm.specialized.id = ''
      this.ridOptions = this.cidToRidOptions[cid - 1].into
    },
    changeRidList () {
      // 初始化时修改对应专业列表
      if (this.confirmForm.academy.id !== '') {
        this.ridOptions = this.cidToRidOptions[this.confirmForm.academy.id - 1].into
      }
    },
    initData () {
      this.init()
      this.confirmForm = this.initDataForm
    }
  }
}
</script>

<style scoped>
.confirm-container {
  margin: 5px 5px;
  width: 350px;
  padding: 15px 15px 0 15px;
  background: #fff;
}

#editButton {
  margin: 0;
}

.size-full {
  width: 100%;
}

.el-dialog {
  margin-top: 3vh !important;
  margin-bottom: 3vh !important;
  overflow: auto;
}

</style>
